﻿@{
    ViewBag.Title = "Customer";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="form-horizontal" >

    <h2>ข้อมูลลูกค้า</h2>
        <legend>จัดการข้อมูลลูกค้า</legend>
        <div class="control-group">
            <label class="control-label" for="input01">ชื่อลูกค้า</label>
            <div class="controls">
                <input type="text" class="input-xlarge" id="txtCustomer"/> &nbsp;<input id="btnSearchCustomer" type="button" class="btn btn-primary" value="ค้นหา"></input>
                <p class="help-block">กรอกส่วนใดส่วนหนึ่งของชื่อลูกค้าเพื่อค้นหา</p>
            </div>
        </div>
        <div class="control-group">
            <table id="grdCustomer"></table>
            <div id="pager"></div>
        </div>
</div>

<script type="text/javascript">

    $(document).ready(function () {
        initialGrid();

        $("#btnSearchCustomer").click(function () {
            doSearch();
        });

    });

    function doSearch() {

        var keyword = $("#txtCustomer").val();

        var params = {
            keyword: keyword
        };

        $('#grdCustomer').jqGrid('clearGridData');
        $('#grdCustomer').setGridParam({ url: '/Customer/GetCustomers', postData: params }).trigger('reloadGrid');

    }


    function initialGrid() {

        var updateDialog = {
            url: '/Customer/Update'
                , closeAfterAdd: true
                , closeAfterEdit: true
                , afterShowForm: function (formId) {

                }
                , afterclickPgButtons: function (whichbutton, formid, rowid) {

                }
                , modal: true

                , onclickSubmit: function (params) {
                    var ajaxData = {};

                    var list = $("#grdCustomer");
                    var selectedRow = list.getGridParam("selrow");
                    var rowData = list.getRowData(selectedRow);
                    ajaxData = { customer_id: rowData.customer_id, customerTypeId: rowData.customer_type_id };

                    return ajaxData;
                }
                , width: "550"
        };

        $.jgrid.nav.addtext = "";
        $.jgrid.nav.edittext = "";
        $.jgrid.nav.deltext = "";
        $.jgrid.edit.addCaption = "เพิ่มลุกค้า";
        $.jgrid.edit.editCaption = "แก้ไขลุกค้า";
        $.jgrid.del.caption = "ต้องการลบรายการนี้หรือไม่?";
        $.jgrid.del.msg = "ต้องการลบรายการนี้หรือไม่?";


        $("#grdCustomer").jqGrid({
            url: '/Customer/GetCustomers',
            datatype: 'json',
            mtype: 'POST',
            colNames: ['Customer Id','ชื่อ-นามสกุล', 'ชื่อ', 'นามสกุล', 'บริษัท', 'ที่อยู่', 'ติดต่อ', 'โทรสาร', 'อีเมล์','ประเภทลูกค้า', 'วันที่สร้าง'],
            colModel: [
                    { name: 'customer_id', index: 'customer_id', width: 40, align: 'left', key: true, editable: true, editrules: { edithidden: false }, hidden: true },
                    { name: 'customer_fullname', index: 'customer_fullname', width: 40, align: 'left', key: false, editable: false, edittype: 'text', editrules: { required: true} },
                    { name: 'customer_firstname', index: 'customer_firstname', width: 40, align: 'left', key: false, editable: true, edittype: 'text', editrules: { required: true} },
                    { name: 'customer_lastname', index: 'customer_lastname', width: 40, align: 'left', key: false, editable: true, edittype: 'text', editrules: { required: true} },
                    { name: 'customer_company', index: 'customer_company', width: 40, align: 'left', key: false, editable: true, edittype: 'text', editrules: { required: true} },
                    { name: 'customer_address', index: 'customer_address', width: 40, align: 'left', key: false, editable: true, edittype: 'textarea', editrules: { required: true} },
                    { name: 'customer_tel', index: 'customer_tel', width: 40, align: 'left', key: false, editable: true, edittype: 'text', editrules: { required: true} },
                    { name: 'customer_fax', index: 'customer_fax', width: 40, align: 'left', key: false, editable: true, edittype: 'text', editrules: { required: true} },
                    { name: 'customer_email', index: 'customer_email', width: 40, align: 'left', key: false, editable: true, edittype: 'text', editrules: { required: true} },
                    { name: 'customer_type', index: 'customer_type', width: 40, align: 'left', key: false, editable: true, edittype: 'select', editoptions: { value: { 'บุคคล': 'บุคคล', 'บริษัท': 'บริษัท'} }, editrules: { required: true} },
                    { name: 'customer_create_date', index: 'customer_create_date', width: 40, align: 'left', key: false, hidden: true}],
            pager: $('#pager'),
            rowNum: 10,
            width: 850,
            rownumbers: true,
            multiselect: true,
            sortname: 'customer_create_date',
            sortorder: "desc",
            viewrecords: true,
            shrinkToFit: true,
            caption: 'รายการลูกค้า',
            autowidth: true
        }).navGrid('#pager',
            {
                edit: true, add: true, del: true, search: false, refresh: true
            }, updateDialog,
            updateDialog,
            updateDialog
        );

    }

</script>